<template>
    <div id="container" ref="containerRef">
        <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="设置" @back="() => router.back()" />
        <div class="set">
            <a-list item-layout="horizontal" :data-source="sysSet" :pagination="false" bordered size="large">
                <template #renderItem="{ item, index }">
                    <a-list-item @click="item.clickFn">
                        <div style="display: flex;align-items: center;">
                            <a-avatar :size="60" :src="item.icon" style="margin-right: .2rem;" />
                            <span>{{ item.title }}</span>
                        </div>
                        <div v-if="item.custom && device">
                            <span v-if="item.name === 'baseUrl'">{{ device.baseUrl }}</span>
                            <span v-if="item.name === 'disinfectAutoMode'">{{ device.disinfectAutoMode ? '自动' : '手动'
                                }}</span>
                            <span v-if="item.name === 'volume'">{{ device.volume }}%</span>
                            <span v-if="item.name === 'disinfectTime'">{{ device.disinfectTime }}分钟</span>
                            <span v-if="item.name === 'allNum'">{{ device.allNum }}个</span>
                            <span v-if="item.name === 'tell'">{{ device.tell }}</span>
                            <span v-if="item.name === 'maxSaveTime'">{{ device.maxSaveTime }}分钟</span>
                            <span v-if="item.name === 'maxVacantNum'">{{ device.maxVacantNum }}个</span>
                            <span v-if="item.name === 'maxWaitCloseTime'">{{ device.maxWaitCloseTime }}分钟</span>
                        </div>
                        <RightOutlined v-else />
                    </a-list-item>
                </template>
            </a-list>
        </div>

        <a-modal title="设备信息修改" v-model:open="updateThreshold" centered destroyOnClose @ok="setDeviceThreshold"
            :closable="false" @cancel="getDeviceThreshold" width="80%">
            <a-form layout="vertical" :model="device">
                <a-form-item v-for="item in sysSet.filter(item => item.custom)" :key="item.title" :label="item.title"
                    :name="item.name">
                    <Switch v-if="item.name === 'disinfectAutoMode'"
                        v-model="(device![item.name as keyof device] as boolean)" checked-text="自动" unchecked-text="手动"
                        checked-color="#3b4ae1" />
                    <a-slider v-else-if="item.name === 'volume'"
                        v-model:value="(device![item.name as keyof device] as number)" :step="5" />
                    <a-input v-else v-model:value="device![item.name as keyof device]">
                        <template #addonAfter v-if="item.unit">
                            <span style="font-size: .3rem;">{{ item.unit }}</span>
                        </template>
                    </a-input>
                </a-form-item>
            </a-form>
        </a-modal>

        <a-modal title="警告" v-model:open="exitSystem" centered destroyOnClose @ok="exitSystemFn" :closable="false"
            width="80%">
            <p style="font-size: .3rem;">确定要退出系统吗？</p>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import Switch from '@/components/Switch.vue';
import { RightOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { db } from '@/utils/DexieDB';
import { isAndroid } from '@/utils/UtilFun';

import wlan from '@/assets/img/wlan.png'
import intent from '@/assets/img/intent.png'
import daohang from '@/assets/img/daohang.png'
import edit from '@/assets/img/edit.png'
import disinfectinfo3 from '@/assets/img/disinfectinfo3.png'
import trumpet from '@/assets/img/trumpet.png'
import disinfectt from '@/assets/img/disinfectt.png'
import tube from '@/assets/img/tube.png'
import updatetell from '@/assets/img/updatetell.png'
import alarm2 from '@/assets/img/alarm2.png'
import count from '@/assets/img/count.png'
import whitelist from '@/assets/img/whitelist.png'
import load from '@/assets/img/load.png'
import puthistory from '@/assets/img/puthistory.png'
import out from '@/assets/img/out.png'
import alarmhistory from '@/assets/img/alarmhistory.png'
import user from '@/assets/img/user.png'
import about from '@/assets/img/about.png'
import quit from '@/assets/img/quit.png'


const router = useRouter();

const device = ref<device>()
const updateThreshold = ref<boolean>(false)
const containerRef = ref<HTMLElement | null>(null);

const exitSystem = ref<boolean>(false)

const sysSet = [
    {
        title: 'WLAN',
        icon: wlan,
        clickFn: () => {
            window.ClosetAndroid.openWlanSettings();
        }
    },
    {
        title: '网络设置',
        icon: intent,
        custom: true,
        name: 'baseUrl'
    },
    {
        title: '设置系统导航显示与隐藏',
        icon: daohang,
        clickFn: () => {
            toggleNav()
        },
    }, {
        title: '设备阈值信息修改',
        icon: edit,
        clickFn: () => {
            updateThreshold.value = true
        }
    }, {
        title: '消毒开关',
        icon: disinfectinfo3,
        custom: true,
        name: 'disinfectAutoMode',
    }, {
        title: '音量调节',
        icon: trumpet,
        custom: true,
        name: 'volume',
    }, {
        title: '消杀时长',
        icon: disinfectt,
        custom: true,
        name: 'disinfectTime',
        unit: '分钟',
    }, {
        title: '标本存放数量上限',
        icon: tube,
        custom: true,
        name: 'allNum',
        unit: '个',
    }, {
        title: '修改联系方式',
        icon: updatetell,
        custom: true,
        name: 'tell',
    }, {
        title: '标本最长存放时间阈值',
        icon: alarm2,
        custom: true,
        name: 'maxSaveTime',
        unit: '分钟',
    }, {
        title: '标本存放剩余量阈值',
        icon: count,
        custom: true,
        name: 'maxVacantNum',
        unit: '个',
    }, {
        title: '舱门未关闭报警时间阈值',
        icon: count,
        custom: true,
        name: 'maxWaitCloseTime',
        unit: '分钟',
    }, {
        title: '标本类型白名单',
        icon: whitelist,
        clickFn: () => {
            router.push({ name: 'WhiteList' })
        }
    }, {
        title: '现存记录',
        icon: load,
        clickFn: () => {
            router.push({ name: 'Records', query: { type: 'put', tableName: 'testTube' } })
        }
    }, {
        title: '放样历史记录',
        icon: puthistory,
        clickFn: () => {
            router.push({ name: 'Records', query: { type: 'history', tableName: 'testTubeHistory' } })
        }
    }, {
        title: '取样记录',
        icon: out,
        clickFn: () => {
            router.push({ name: 'Records', query: { type: 'out', tableName: 'testTubeHistory' } })
        }
    }, {
        title: '报警记录',
        icon: alarmhistory,
        clickFn: () => {
            router.push({ name: 'Records', query: { type: 'alarm', tableName: 'error' } })
        }
    }, {
        title: '消毒使用记录',
        icon: alarmhistory,
        clickFn: () => {
            router.push({ name: 'Records', query: { type: 'disinfect', tableName: 'disinfect' } })
        }
    }, {
        title: '用户管理',
        icon: user,
        clickFn: () => {
            router.push({ name: 'User' })
        }
    }, {
        title: '关于设备',
        icon: about,
        clickFn: () => {
            router.push({ name: 'AboutDevice' })
        }
    }, {
        title: '退出系统',
        icon: quit,
        clickFn: () => {
            exitSystem.value = true

        }
    }
]




function toggleNav() {
    window.ClosetAndroid.setNavVissable()
}


function setDeviceThreshold() {
    // window.ClosetAndroid.setDeviceThreshold(device.value)
    db.device.update(1, { ...device.value }).then(async () => {
        updateThreshold.value = false
        device.value = await db.device.get(1) as device;
        console.log(device.value);
        if (isAndroid()) {
            window.ClosetAndroid.setMediaVolume(device.value.volume)
        }
    })
}
function getDeviceThreshold() {
    db.device.get(1).then(res => {
        device.value = res;
        updateThreshold.value = false
    });
}


function exitSystemFn() {
    window.ClosetAndroid.exitSystem()
}



onMounted(async () => {
    const deviceInstance = await db.device.get(1) as device;
    console.log(deviceInstance);
    device.value = deviceInstance
})

</script>
<style lang="scss" scoped>
// #container {
//     width: 100%;
//     height: 100vh;
//     overflow: auto;

//     .set {
//         position: absolute;
//         top: 1.25rem;
//         width: 100%;
//         height: calc(100vh - 1.25rem);
//         overflow-y: auto; // 明确指定y轴滚动
//         overflow-x: hidden;
//         -webkit-overflow-scrolling: touch; // 添加移动端滚动优化
//     }




// }
:deep(.ant-list-item) {
    font-size: .375rem;
}

#container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .set {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
}
</style>